<template>
    <div class="coupon-detail">
        <view class="title">优惠明细</view>
        <view class="closeBtn" @click="closeCoupon"></view>
        <view class="sale-tip-info">已享打包价大促销，全部底片打包仅需 {{ packPrice | toFixed(2) }} 元</view>
        <view class="coupon-list">
            <view
                class="coupon"
                :class="{ selectCoupon: item.coupon_number === couponNumber, disableCoupon: !item.isCanUse }"
                v-for="(item, index) in couponList"
                :key="item.coupon_number"
                @click="selectCoupon(item)"
            >
                <view class="coupon-info">
                    <view class="coupon-des">{{ item.name }}</view>
                    <view class="date">有效期至 {{ item.valid_end_date }}</view>
                </view>
                <view class="use_condit_desc">{{ item.use_condit_desc }}</view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
    name: 'CouponDetail',
    data() {
        return {};
    },
    props: {
        couponList: {
            type: Array,
            require: true
        },
        currentCoupon: {
            type: Object,
            require: true
        },
        packPrice: {
            type: String
        }
    },
    computed: {
        couponNumber() {
            return this.currentCoupon.coupon_number;
        }
    },
    mounted() {},
    created() {},
    methods: {
        closeCoupon() {
            this.$emit('closeCoupon');
        },
        selectCoupon(item) {
            if (!item.isCanUse) {
                this.$showToast('优惠券不可用！');
                return;
            }
            if (item.coupon_number === this.currentCoupon.coupon_number) {
                return;
            }
            this.$emit('selectCoupon', item);
        }
    },
    components: {},
    watch: {
        couponList: {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    let canuseList = newVal.filter(item => {
                        return item.isCanUse;
                    });
                    this.couponNumber = canuseList[0].coupon_number;
                }
            },
            deep: true,
            immediate: true
        }
    }
};
</script>
<style lang="scss" scoped="scoped">
$border: 1rpx solid #e9ebf3;
$select-border: 1rpx solid #47c649;
.coupon-detail {
    position: relative;
    width: 750rpx;
    background-color: #ffffff;
    border-radius: 10rpx 10rpx 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    box-sizing: border-box;
    color: #262832;
    .title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
    }
    .closeBtn {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
        width: 30rpx;
        height: 30rpx;
        background-image: url(@/static/common/closeBtn.png);
        background-size: cover;
        &::after {
            position: absolute;
            content: '';
            width: 300%;
            height: 300%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            // background: #000;
        }
    }
    .sale-tip-info {
        width: 100%;
        font-size: 26rpx;
        color: #26bf6e;
        line-height: 30rpx;
    }
    .coupon-list {
        max-height: 800rpx;
        overflow-y: scroll;
        background-color: #ffffff;
        .coupon {
            position: relative;
            width: 670rpx;
            height: 204rpx;
            border: $border;
            border-radius: 8rpx;
            margin-top: 30rpx;
            box-sizing: border-box;
            .coupon-info {
                position: relative;
                padding: 30rpx 30rpx 0;
                &::after {
                    position: absolute;
                    content: '';
                    bottom: 0;
                    left: -1rpx;
                    width: 15rpx;
                    height: 30rpx;
                    background: #fff;
                    border-radius: 0 30rpx 30rpx 0;
                    border: $border;
                    border-left: none;
                    z-index: 20;
                    transform: translate(0, 50%);
                }
                &::before {
                    position: absolute;
                    content: '';
                    bottom: 0;
                    right: -1rpx;
                    width: 15rpx;
                    height: 30rpx;
                    background: #fff;
                    border-radius: 30rpx 0 0 30rpx;
                    border: $border;
                    border-right: none;
                    z-index: 20;
                    transform: translate(0, 50%);
                }
                .coupon-des {
                    font-size: 30rpx;
                    line-height: 30rpx;
                    padding-bottom: 15rpx;
                    font-weight: bold;
                }
                .date {
                    font-size: 26rpx;
                    line-height: 26rpx;
                    padding-bottom: 30rpx;
                    border-bottom: 1px solid #e9ebf3;
                }
            }
            .use_condit_desc {
                padding: 24rpx 30rpx;
                color: #bebebe;
                font-size: 26rpx;
                line-height: 26rpx;
            }
        }
        .selectCoupon {
            border: $select-border;
            &::after {
                position: absolute;
                content: '';
                right: 0;
                top: 0;
                z-index: 2;
                width: 44rpx;
                height: 44rpx;
                background-image: url(@/static/common/select-icon.png);
                background-size: cover;
            }
            .coupon-info {
                &::after {
                    border: $select-border;
                    border-left: none;
                }
                &::before {
                    border: $select-border;
                    border-right: none;
                }
            }
        }
        .disableCoupon {
            &::after {
                position: absolute;
                content: '';
                right: 20rpx;
                top: 20rpx;
                z-index: 2;
                width: 98rpx;
                height: 87rpx;
                background-image: url(@/static/common/disable-icon.png);
                background-size: cover;
            }
        }
    }
}
</style>
